<template>
	<div class="sellerCenter" @click="isDropdown=false">
		<div class="content">
			<!--................累计金额.............-->
			<div class="count clearfix mb-20">
				<div class="plate bg-f mr-20 ">
					<div class="border-b clearfix">
						<div class="float-l mb-10">
							<span class="color-7F f14">总销售额</span>
							<p class="color-3 font-b f24 mt-10">
								￥{{total.total_sell_money_yuan}}
							</p>
						</div>
						<svg width="48" height="48" class="float-r">
							<use xlink:href="#money"  />
						</svg>
					</div>
					<div>
						<p class="color-7F f14 mt-10">
							今日销售额
							<span class="color-3">￥{{total.today_sell_money_yuan}}</span>
						</p>
					</div>
				</div>
				<div class="plate bg-f mr-20">
					<div class="border-b clearfix">
						<div class="float-l mb-10">
							<span class="color-7F f14">支付订单数</span>
							<p class="color-3 font-b f24 mt-10">	
								{{total.total_pay_order_num}}
							</p>
						</div>
						<svg width="48" height="48" class="float-r">
							<use xlink:href="#payOrder"  />
						</svg>
					</div>
					<div>
						<p class="color-7F f14 mt-10">
							今日订单数
							<span class="color-3">{{total.today_pay_order_num}}</span>
						</p>
					</div>
				</div>
				<div class="plate bg-f mr-20">
					<div class="border-b clearfix">
						<div class="float-l mb-10">
							<span class="color-7F f14">访问量</span>
							<p class="color-3 font-b f24 mt-10">
								{{total.total_pv_num}}
							</p>
						</div>
						<svg width="48" height="48" class="float-r">
							<use xlink:href="#member"  />
						</svg>
					</div>
					<div>
						<p class="color-7F f14 mt-10">
							今日访客量
							<span class="color-3">{{total.today_pv_num}}</span>
						</p>
					</div>					
				</div>
				<div class="plate bg-f">
					<div class="border-b clearfix">
						<div class="float-l mb-10">
							<span class="color-7F f14">访客量</span>
							<p class="color-3 font-b f24 mt-10">	
								{{total.total_uv_num}}
							</p>
						</div>
						<svg width="48" height="48" class="float-r">
							<use xlink:href="#visitNum"  />
						</svg>
					</div>
					<div>
						<p class="color-7F f14 mt-10">
							今日访客数
							<span class="color-3">{{total.today_uv_num}}</span>
						</p>
					</div>	
				</div>
			</div>
			<!--.....................店铺动态和待处理事件..............-->
			<div class="dynamicEvent clearfix">
				<!--.....................店铺动态..............-->
				<div class="dynamic float-l">
					<h3 class="color-3 f14 shopTitle">店铺动态</h3>
					<div v-if="DynamicList.length>0">
						<div class="dynamicLists" v-for="item in DynamicList">
							<div class="storeItem clearfix">
								<div class="storeItemLf float-l mr-10"><i class="iconfont icon-hebingxingzhuang"></i></div>
								<div class="storeItemRt float-l">
									<div class="top color-3 f14">
										{{item.nick_name}}
										{{item.operate_type===1?"购买了":item.operate_type===2?"确认收货":item.operate_type===3?"申请了":"撤销了"}}
										<span v-if="item.operate_type===1" v-for="child in item.remark.split(';')" class="color-b">
											{{child}}
										</span>
										<span class="color-red">{{item.operate_type===3?"退款":""}}</span>
										<span class="color-b">{{item.operate_type===4?"退款申请":""}}</span>
										
									</div>
									<div class="bottom f12 color-7F">{{item.created_at_show}}</div>
								</div>
							</div>						
						</div>
					</div>
					<div v-if="DynamicList.length===0">
						<div v-for="item in empty" class="storeItem">
							{{item.index}}
						</div>
					</div>
				</div>
				<!--.....................待处理事件..............-->
				<div class="event float-r">
					<h3 class="color-3 f14 shopTitle">待处理事件</h3>
					<div class="storeItem clearfix lh" @click="expressJump('express')">
						<span class="float-l color-3 f14">快递配送-待发货订单</span>
						<div class="float-r btn">{{getNum.need_delivery_express}}</div>
					</div>
					<div class="storeItem clearfix lh" @click="expressJump('shop')">
						<span class="float-l color-3 f14">门店配送-待送货订单</span>
						<div class="float-r btn">{{getNum.need_delivery_shop}}</div>
					</div>
					<div class="storeItem clearfix lh" @click="expressJump('self')">
						<span class="float-l color-3 f14">上门自提-待备货订单</span>
						<div class="float-r btn">{{getNum.need_delivery_self}}</div>
					</div>
					<div class="storeItem clearfix lh" @click="lockStore">
						<span class="float-l color-3 f14">库存不足商品</span>
						<div class="float-r btn">{{getNum.sellout_product}}</div>
					</div>
					<div class="storeItem clearfix lh" @click="refund">
						<span class="float-l color-3 f14">退款/售后申请</span>
						<div class="float-r btn">{{getNum.need_refund}}</div>
					</div>
				</div>
			</div>
			<!--.....................销售额订单数访问量访客量..............-->
			<div class="tableFour mt-20 pos-r">
				<!--.....................日期选择..............-->
				<div @click.stop="">
					<el-tabs v-model="activeTime" @tab-click="handleTime" class="pos-a activeTime">
						<el-tab-pane label="本周" name="week"></el-tab-pane>
					    <el-tab-pane label="本月" name="month"></el-tab-pane>			   
					    <el-tab-pane label="全年" name="year"></el-tab-pane>
					</el-tabs>
				</div>
				<el-date-picker  v-model="choiceDate" type="daterange" placeholder="选择日期范围" class="pos-a choiceDate"
					 @change="changeTime" :class="isDropdown===true?'Dropdown':''">
      			</el-date-picker>
          
				<!--.....................表格..............-->
				<el-tabs v-model="activeName" @tab-click="handleClick">
				    <el-tab-pane label="销售额" name="first">
				    	<div v-if="mallDataTitle==='销售额趋势'">
				    		<tableData :mallData="mallData" :mallDataTitle="mallDataTitle" :tabName="tabName"></tableData>
				    	</div>
				    </el-tab-pane>
				    <el-tab-pane label="订单数" name="second">
				    	<div v-if="mallDataTitle==='订单数趋势'">
				    		<tableData :mallData="mallData" :mallDataTitle="mallDataTitle" :tabName="tabName"></tableData>
				    	</div>
				    </el-tab-pane>
				    <el-tab-pane label="访问量" name="third">
				    	<div v-if="mallDataTitle==='访问量趋势'">
				    		<tableData :mallData="mallData" :mallDataTitle="mallDataTitle" :tabName="tabName"></tableData>
				    	</div>
				    </el-tab-pane>
				    <el-tab-pane label="访客量" name="fourth">
				    	<div v-if="mallDataTitle==='访客量趋势'">
				    		<tableData :mallData="mallData" :mallDataTitle="mallDataTitle" :tabName="tabName"></tableData>
				    	</div>
				    </el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import {getMallData,getshopDynamics,getDynamicsNum,getMallNum} from "@/api/seller"
	import { format } from "@/api/script"
	import tableData from "@/components/sellerCenter/table"
	import router from "@/router"
	export default{
		data(){
			return{
				total:{},
				setDynamic:{
					mall_id: "",
				    shop_id: "",
				    page: 1,
				    per_page: 5
				},
				DynamicList:[],
				empty:[
					{index:""},
					{index:""},
					{index:""},				
					{index:""},			
					{index:""},				
				],
				DynamicNum:{
					mall_id: "",
				    shop_id: "",
				},
				getNum:{},
				clearNumTime:"",
				clearDynamicTime:"",
				activeName:"first",
				activeTime:"week",
				choiceDate:[],
				timeDate:{
					mall_id: "",
				    start_date: "",
				    end_date: "",
				},
				now:"",
				year:"",
				month:"",
				mallData:{},//商城数据
				mallDataTitle:"销售额趋势",
				tabName:"week",
				isDropdown:false,
				index:0,
			}
		},
		created(){
			let mall_id = this.$store.getters.getMall_id;
			let shop_id=this.$store.getters.getShop_id;
			this.$set(this.timeDate,"mall_id",mall_id)
			//调用获取商城数据接口
			getMallData(mall_id)
			.then(({data})=>{
				this.total=data
			})
			.catch(({response: {data}})=>{
				this.$message.error(data.errorcmt);
			})	
			this.$set(this.setDynamic,"mall_id",mall_id);
			this.$set(this.setDynamic,"shop_id",shop_id);
			//时时调用动态列表接口
			var that=this
			this.shopDynamicsAPI(this.setDynamic)
			this.clearDynamicTime=setInterval(function(){
				that.shopDynamicsAPI(that.setDynamic)
			},10000);

			this.$set(this.DynamicNum,"mall_id",mall_id);
			this.$set(this.DynamicNum,"shop_id",shop_id);
			//时时调用获取店铺待处理事件数量接口
			this.DynamicsNumAPI(this.DynamicNum)
			this.clearNumTime=setInterval(function(){
				that.DynamicsNumAPI(that.DynamicNum)
			},10000);

			//默认本周表格数据
			this.timeDate.start_date=this.selfWeek(0);
			//本周结束时间
			this.timeDate.end_date=this.selfWeek(-6);
			this.mallAPI(this.timeDate);
			//时间框显示时间
			this.visitPicked();
		},		
		components:{
			tableData
		},
		beforeRouteLeave(to, from, next){
			next(true);
			clearInterval(this.clearNumTime);
			clearInterval(this.clearDynamicTime);
		},
		methods:{
			//库存不足按钮
			lockStore(){
				router.push({path:"/zxh/commodityPage/sale_commodity",query:{number:0}})
			},
			//退款售后申请
			refund(){
				router.push({path:"/zxh/orderPage/refundOrder",query:{name:"refund"}})
			},
			//点击快递配送
			expressJump(data){
				this.routerJump(data);
			},
			routerJump(data){
				router.push({path:"/zxh/orderPage/UnshippedOrder",query:{name:data}})
			},
			visitPicked(){
				this.isDropdown=true;
				this.$set(this.choiceDate, 0, new Date(this.timeDate.start_date))
				this.$set(this.choiceDate, 1, new Date(this.timeDate.end_date))				
			},
			shopDynamicsAPI(data){
				//获取动态列表接口
				getshopDynamics(data)
				.then(({data})=>{
					this.DynamicList=data;
				})
				.catch(({response: {data}})=>{
					this.$message.error(data.errorcmt);
				})	
			},
			DynamicsNumAPI(data){
				//获取店铺待处理事件数量API
				getDynamicsNum(data)
				.then(({data})=>{
					this.getNum=data
				})
				.catch(({response: {data}})=>{
					this.$message.error(data.errorcmt);
				})	
			},
			handleClick(tab){
				switch(true){
					case tab.name==="first":
						this.mallDataTitle="销售额趋势";
						break;
					case tab.name==="second":
						this.mallDataTitle="订单数趋势";
						break;
					case tab.name==="third":
						this.mallDataTitle="访问量趋势";
						break;
					case tab.name==="fourth":
						this.mallDataTitle="访客量趋势";
						break;
				}
			},
			//点击切换
			handleTime(tab){
				//本周
				if(tab.name==="week"){
					//本周开始时间
					this.timeDate.start_date=this.selfWeek(0);
					//本周结束时间
					this.timeDate.end_date=this.selfWeek(-6);
					this.visitPicked();
					this.mallAPI(this.timeDate);
				};
				//本月
				if(tab.name==="month"){
					this.commonTime();
					this.timeDate.start_date=this.year+"-"+(this.month<10?('0'+this.month):this.month)+"-"+"01";
					this.timeDate.end_date=this.selfMonth();
					this.mallAPI(this.timeDate);
					//时间框显示时间
					this.visitPicked();
					
				};
				//全年
				if(tab.name==="year"){
					this.commonTime();
					this.timeDate.start_date=this.year+"-"+"01"+"-"+"01";
					this.timeDate.end_date=this.year+"-"+"12"+"-"+"31";
					this.mallAPI(this.timeDate);
					//时间框显示时间
					this.visitPicked();
				};
				this.tabName=tab.name
			},
			//本周方法
			selfWeek(n){
				//调用时间公共方法
				this.commonTime();
				var date=this.now.getDate();
				var day=this.now.getDay();
				if(day!==0){
					n=n+(day-1);
				}else{					
					n=n+day;
				};
				if(day){
					//这个判断是为了解决跨年的问题
					if(this.month>1){
						this.month=this.month;
					}else{
						//这个判断是为了解决跨年的问题,月份是从0开始的				
						this.year=this.year-1;
						this.month=12;
					}
				};
				this.now.setDate(this.now.getDate()-n);	
				this.year=this.now.getFullYear();
				this.month=this.now.getMonth()+1;
				date=this.now.getDate();
				let s=this.year+"-"+(this.month<10?('0'+this.month):this.month)+"-"+(date<10?('0'+date):date);
				return s;
			},
			//时间公共方法
			commonTime(){				
				this.now=new Date();				
				this.year = this.now.getFullYear();			
    			this.month = this.now.getMonth()+1;
			},
			//本月方法(末尾)
			selfMonth(){
				//调用时间公共方法
				this.commonTime();
    			var d = new Date(this.year, this.month, 0);//0表示月底				
				var s=this.year+"-"+(this.month<10?("0"+this.month):this.month)+"-"+d.getDate()
    			return s;
			},
			//获取商城统计图数据API
			mallAPI(data){
				getMallNum(data)
				.then(({data})=>{
					this.mallData=data;
				})
				.catch(({response: {data}})=>{
					this.$message.error(data.errorcmt);
				})	
			},
			changeTime(){
				if((this.choiceDate[0]!==null||this.choiceDate[1]!==null)&&this.isDropdown===false){
					this.timeDate.start_date=format(this.choiceDate[0]);
					this.timeDate.end_date=format(this.choiceDate[1]);					
					this.index++;//使表格的computed有用
					this.tabName="timeTable"+this.index;
					this.mallAPI(this.timeDate);
					this.activeTime="";
				};
			},
		}
	}
</script>

<style scoped="scoped">
	.sellerCenter{
		margin-top: 70px;
	}
	.content{
		box-sizing: border-box;
	    width: 1240px;
	    min-height: 204px;
	    border-radius: 4px;
	    margin: 0 auto;
	}
	.plate{
		float: left;
		padding: 20px;
		width: 255px;
		height: 102px;
		border-radius: 2px;
	}
	.border-b{
		border-bottom: 1px solid #F0F4F7;
	}
	.dynamic{
		padding: 20px;
		width: 885px;
		background-color: #fff;
		height: 304px;
	}
	.shopTitle{
		padding-bottom: 18px;
		border-bottom: 1px solid #F0F4F7;
	}
	.storeItem{
		height: 30px;
		padding-top: 11px;
		padding-bottom: 11px;
		border-bottom: 1px solid #F0F4F7;
	}
	.storeItemRt{
		width: 845px;
	}	
	.storeItemRt .top{
		white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.storeItem:hover{
		background-color:#F8FAFC ;
	}
	.storeItemLf{
		position: relative;
		height: 30px;
		width: 30px;
		border-radius: 50%;
		background-color: #0070C9;
	}
	.storeItemLf i{
		position: absolute;
		color: #fff;
		font-size: 24px;
		left: 50%;
		top: 50%;
		margin-top: -12px;
		margin-left: -12px;
	}
	.event{
		width: 255px;
		padding: 20px;
		height: 304px;
		background-color: #fff;
	}
	.lh{
		line-height: 33px;
	}
	.btn{
		width: 48px;
		height: 24px;
		border-radius: 12px;
		background-color: #008FF2;
		text-align: center;
		color: #fff;
		line-height: 24px;
		margin-top:4px;
	}
	.tableFour{
		padding:20px 20px 40px;
		background-color: #fff;
	}

</style>
<style>
	.activeTime{
		right: 250px;
		top: 20px;
		z-index:100;
	}
	.activeTime .el-tabs__header{
		border-bottom: none;
	}
	.activeTime  .el-tabs__active-bar{
		background-color: transparent;
	}
	.choiceDate{
		right: 20px;
		top: 22px;
		z-index: 100;
	}
	.choiceDate .el-input__icon+.el-input__inner{
		height: 32px;
		line-height: 32px;
	}
</style>